<template>
  <pro-iframe :srcdoc="htmlValue" v-bind="$attrs" />
</template>
<script lang="ts" setup name="ProTinymceHtml">
const props = defineProps({
  html: String
})

const htmlValue = computed(() => {
  return props.html
    ? `<head><link rel="stylesheet" type="text/css"  href="/resource/tinymce/skins/ui/oxide/content.min.css"><link rel="stylesheet" type="text/css" id="mce-u1" href="/resource/tinymce/skins/content/default/content.css"></head>
  <body class="mce-content-body "><div style="overflow-y:hidden; padding: 0 10px;"> ${props.html}</div></body>`
    : ''
})
</script>
